// var
@video-prefix-cls       : x-video;
@video-main-color       : #A5907B;
@video-bg-color         : #16151A;
@video-font-size-small  : 12px;
@video-font-size        : 14px;
@video-font-size-large  : 16px;
@video-cue-font-size    : 24px;
@video-font-color       : #999;
@video-title-size       : 80px;
@video-menu-size        : 360px;
@video-toolsbar-size    : 80px;
@video-subtitle-zindex  : 4;
@video-mask-zindex      : 5;
@video-title-zindex     : 6;
@video-menu-zindex      : 7;
@video-toolsbar-zindex  : 8;

// mixins
.video-size(@base-size) {
  font-size: @base-size;
  .@{video-prefix-cls} {
    &__subtitle {
      bottom: @base-size * 3.5;
    }
    &__mask {
      .xvu-iconfont {
        font-size: @base-size * 2;
      }
    }
    &__title {
      height: @base-size * 3;
      line-height: @base-size * 3;
    }
    &__menu {
      width: @base-size * 20;
      &_head {
        height: @base-size * 3;
        line-height: @base-size * 3;
      }
      &_btn {
        .size(@base-size * 1.2, @base-size * 3.6);
      }
      &_item_poster {
        height: @base-size * 8;
      }
    }
    &__toolsbar {
      height: @base-size * 3.5;
      padding: @base-size * 0.5;
      .xvu-iconfont {
        font-size: @base-size * 1.8;
        line-height: @base-size * 2.5;
        .size(@base-size * 2.5, @base-size * 2.5);
      }
      &_fullscreen,
      &_clarity,
      &_subtitles,
      &_spend,
      &_duration {
        line-height: @base-size * 2.5;
      }
      &_duration {
        font-size: @base-size;
      }
    }
  }
  &.@{video-prefix-cls}-hastoolsbar {
    video {
      .size(100%, calc(100% - @base-size * 6.5));
      top: @base-size * 3;
    }
  }
}
@keyframes spinner {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

// styles
.@{video-prefix-cls} {
  .size(100%, 100%);
  .video-size(@video-font-size);
  // min-width: 400px;
  // min-height: 225px;
  box-shadow: 0 0 5px fade(@video-bg-color, 40%);
  background-color: @video-bg-color;
  overflow: hidden;
  user-select: none;
  position: relative;
  video {
    .absolute-fullscreen;
    .size(100%, 100%);
    &::cue {
      background: none;
      color: #fff;
      text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
      font-size: @video-cue-font-size;
    }
  }
  &__subtitle {
    position: absolute;
    left: 0;
    right: 0;
    z-index: @video-subtitle-zindex;
    padding: .5em 1em;
    font-size: @video-cue-font-size;
    line-height: 1.414;
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    text-align: center;
  }
  &__mask {
    .absolute-fullscreen;
    z-index: @video-mask-zindex;
    color: #fff;
    text-shadow: 0 0 5px #000;
    .flex-center;
    .xvu-spinner {
      opacity: .5;
      animation: spinner 4s linear infinite;
    }
  }
  &__title {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: @video-title-zindex;
    padding: 0 1em;
    text-align: center;
    color: tint(@video-main-color, 40%);
    background-color: fade(tint(@video-bg-color, 50%), 40%);
    .text-ellipsis;
  }
  &__menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: @video-menu-zindex;
    border-right: 1px solid tint(@video-bg-color, 30%);
    transition: all .5s ease;
    color: tint(@video-main-color, 40%);
    background-color: fade(tint(@video-bg-color, 15%), 90%);
    display: flex;
    flex-direction: column;
    padding-bottom: 3.5em;
    &-collapse {
      transform: translateX(-100%);
    }
    &_head {
      line-height: 3;
      border-bottom: 1px solid tint(@video-bg-color, 30%);
      .fl {
        width: calc(100% - 3em);
        height: 100%;
        padding: 0 .5em;
        letter-spacing: .1em;
      }
      .fr {
        width: 3em;
        height: 100%;
        padding: 0 .5em;
        text-align: center;
        cursor: pointer;
      }
    }
    &_body {
      height: 0;
      flex-grow: 1;
      padding: .5em;
      text-align: left;
      overflow: hidden auto;
      &-nodata {
        margin-top: 5em;
        text-align: center;
        color: fade(tint(@video-main-color, 50%), 40%);
      }
    }
    &_btn {
      position: absolute;
      left: 100%;
      top: 60%;
      border-radius: 0 .3em .3em 0;
      background-color: tint(@video-bg-color, 15%);
      cursor: pointer;
      .flex-center;
    }
    &_item {
      padding: .2em .5em;
      margin-bottom: .5em;
      cursor: pointer;
      &_label {
        line-height: 2;
        display: flex;
        &_title {
          width: 0;
          flex-grow: 1;
          .text-ellipsis;
        }
        &_duration {
          width: 5.5em;
          text-align: right;
        }
      }
      &_poster {
        padding-bottom: .3em;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      &:hover, &:focus, &.active {
        background-color: rgba(255,255,255,.075);
        text-shadow: 1px 1px 1px @video-bg-color;
      }
    }
  }
  &__toolsbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: @video-toolsbar-zindex;
    // border-top: 2px solid @video-main-color;
    background-color: fade(@video-bg-color, 90%);
    display: flex;
    .xvu-iconfont {
      display: inline-block;
      margin: 0 .25em;
      color: @video-main-color;
      cursor: pointer;
      text-align: center;
      &:hover {
        color: tint(@video-main-color, 30%);
      }
    }
    &_left {
      width: 35%;
      text-align: left;
    }
    &_middle {
      width: 30%;
      text-align: center;
    }
    &_right {
      width: 35%;
      text-align: right;
    }
    &_progress {
      position: absolute;
      left: 0;
      top: -2px;
      width: 100%;
      padding: 0 1em;
      .x-video-progress {
        float: left;
      }
    }
    &_fullscreen,
    &_clarity,
    &_subtitles,
    &_spend,
    &_duration {
      display: inline-block;
      height: 100%;
      margin: 0 .25em;
      color: @video-main-color;
    }
    &_fullscreen,
    &_clarity,
    &_subtitles,
    &_spend {
      font-size: @video-font-size-small;
      cursor: pointer;
      position: relative;
      & > span.label {
        display: inline-block;
        height: 100%;
        padding: 0 .5em;
      }
    }
    .@{video-prefix-cls}-poptip {
      position: absolute;
      left: 50%;
      bottom: 100%;
      z-index: 2;
      transform: translate(-50%, -0.75em);
      min-width: 4em;
      text-align: center;
      &-item {
        // height: @video-font-size-small * 2;
        // line-height: @video-font-size-small * 2;
        height: 2em;
        line-height: 2;
        padding: 0 .5em;
        border-bottom: 1px solid tint(@video-bg-color, 30%);
        .text-ellipsis;
        &.active, &:hover {
          text-shadow: 1px 1px 1px @video-bg-color;;
          background-color: tint(@video-bg-color, 20%);
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
    &_volume {
      display: inline-block;
      position: relative;
      .@{video-prefix-cls}-poptip {
        min-width: 2.5em;
        height: @video-font-size-small * 8;
        padding-top: 1em;
        padding-bottom: 1em;
      }
    }
    &_fullscreen {
      .@{video-prefix-cls}-poptip {
        min-width: 1em;
        &-item {
          height: auto;
          padding: 0;
          .xvu-iconfont {
            margin: 0;
          }
        }
      }
    }
  }
  &__playorder {
    position: relative;
    &_label {
      position: absolute;
      left: 100%;
      top: 0;
      width: 4.5em;
      height: 100%;
      font-size: @video-font-size-small;
      .flex-center;
    }
  }
  &&-webFullscreen {
    .fixed-fullscreen;
    z-index: @zindex-video-fullscreen;
  }
  &&-error {
    video {
      background-color: #000;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E视频无法预览%3C/text%3E%3C/svg%3E");
    }
  }
}

// styles - more
.@{video-prefix-cls} {
  &-small {
    .video-size(@video-font-size-small);
  }
  &-large {
    .video-size(@video-font-size-large);
  }
}
